<template>
  <div class="radar-content" id="radar_content">
    <a-table
      class="crud-table"
      :columns="columns"
      :data-source="tableData"
      :pagination="false"
      :loading="loading"
      :scroll="{ x: '200px', y: tableHeight + 'px' }"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'resultType'">
          {{ getDictLabel(record.alarmType, alarmTypeList, { label: 'name', value: 'value' }) }}
        </template>
        <!-- <template v-if="column.dataIndex === 'result'">
          {{ getTypeFn(record) }}
        </template> -->
        <template v-if="column.dataIndex === 'imagesUrl'">
          <a-image :width="50" :src="`${aiFileUrl}${record.imagesUrl}`" />
        </template>
      </template>
    </a-table>

    <div class="smart-query-table-page">
      <a-pagination
        show-less-items
        :defaultPageSize="queryForm.size"
        v-model:current="queryForm.current"
        v-model:pageSize="queryForm.size"
        :total="total"
        @change="onload"
        @showSizeChange="onload"
        :show-total="(total) => `共${total}条`"
      />
    </div>
  </div>
</template>
<script setup>
  import { ref, computed, watch, onMounted, reactive } from 'vue';
  import { api } from '/@/api/plat/event-result.js';
  import { getDictLabel } from '/@/utils/methods';
  import { alarmTypeList } from '/@/config/strategy';
  const aiFileUrl = import.meta.env.VITE_APP_AIFILE;

  const props = defineProps({
    alarmInfo: {
      type: Object,
      default: () => {},
    },
  });

  const tableHeight = ref(0);
  const columns = [
    {
      title: '摄像头名称',
      dataIndex: 'cameraName',
      width: 140,
    },
    {
      title: '识别类型',
      dataIndex: 'resultType',
      width: 120,
      align: 'center',
    },
    {
      title: '识别结果',
      dataIndex: 'result',
      width: 200,
    },
    {
      title: 'AI图片',
      dataIndex: 'imagesUrl',
      width: 90,
    },
    {
      title: '识别时间',
      dataIndex: 'resultTime',
      width: 170,
    },
  ];

  const tableData = ref([]);
  let loading = ref(false);
  const queryFormState = {
    current: 1,
    size: 20,
  };
  const total = ref(0);
  const queryForm = ref({ ...queryFormState });

  function queryData() {
    queryForm.value.current = 1;
    onload();
  }

  function onload(query) {
    const { size, current } = queryForm.value;
    loading.value = true;
    api
      .queryPage(
        Object.assign(
          {},
          { size, current },
          {
            targetId: props.alarmInfo.targetId,
            eventType: 1,
            startTime: props.alarmInfo.startTime,
            endTime: props.alarmInfo.endTime,
          }
        )
      )
      .then(({ data }) => {
        tableData.value = data.records;
        total.value = data.total;
        loading.value = false;
      });
  }

  function getTypeFn(row) {
    const fnRow = alarmTypeList.find((m) => m.value == row.resultType);
    if (!fnRow) {
      return '';
    } else {
      return fnRow.resultFormat(row.result);
    }
  }

  onMounted(() => {
    const mapElement = document.getElementById('radar_content');
    if (mapElement) {
      tableHeight.value = mapElement.offsetHeight - 32 - 64;
    }
    // 根据目标ID获取轨迹
    queryData();
  });

  defineExpose({});
</script>

<style lang="less" scoped>
  @import '/@/assets/style/table.less';
  .radar-content {
    height: 100%;
  }
</style>
